<template>
	<view>
		<view class="flex">
			<view class="flex-sub bg-blue padding-sm margin-xs round text-center">喜好口味</view>
			<view class="flex-sub bg-blue padding-sm margin-xs round text-center">意向餐厅</view>
			<view class="flex-sub bg-blue padding-sm margin-xs round text-center">中意主食</view>
		</view>
		<view class="flex">
			<view :class="{ active: isSelect[0] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_kouwei(0)">清淡</view>
			<view :class="{ active: isSelect_res[0] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_res(0)">
				华源</view>
			<view :class="{ active: isSelect_zhushi[0] }"
				class="flex-sub bg-gray padding-sm margin-xs radius text-center" @click="select_zhushi(0)">米饭</view>
		</view>
		<view class="flex">
			<view :class="{ active: isSelect[1] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_kouwei(1)">适中</view>
			<view :class="{ active: isSelect_res[1] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_res(1)">
				南苑</view>
			<view :class="{ active: isSelect_zhushi[1] }"
				class="flex-sub bg-gray padding-sm margin-xs radius text-center" @click="select_zhushi(1)">馒头</view>
		</view>
		<view class="flex">
			<view :class="{ active: isSelect[2] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_kouwei(2)">辛辣</view>
			<view :class="{ active: isSelect_res[2] }" class="flex-sub bg-gray padding-sm margin-xs radius text-center"
				@click="select_res(2)">
				北苑</view>
			<view :class="{ active: isSelect_zhushi[2] }"
				class="flex-sub bg-gray padding-sm margin-xs radius text-center" @click="select_zhushi(2)">面条</view>
		</view>
		<view class="flex">
			<view  class="flex-sub bg-cyan padding-sm margin-xs radius text-center" @click="filter">强力筛选</view>
		</view>
		<!-- 筛选出来的美食 -->
		<view class="list" v-if="flag">
		<view class="li"  @click="toDetail">
			<view class="img">
				<image :src="item.fileID" mode="widthFix"></image>
			</view>
			<view class="detail">
				<view class="name">名字：{{item.title}}</view>
				<view class="adress">地址：{{item.location}}</view>
				<view class="grade">评分：{{item.rate}}</view>
			</view>
			<view class="reason">推荐理由:{{item.content}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelect: [false, false, false],
				isSelect_res: [false, false, false],
				isSelect_zhushi: [false, false, false],
				item: {},
				flag: false
			};
		},
		methods: {
			// 选择口味
			select_kouwei: function(e) {
				// this.isSelect[0] = true
				// console.log(this.isSelect[0])
				for (let i = 0; i < this.isSelect.length; i++) {
					if (i == e) {
						// this.$set( this.isSelect , i, true)
						this.isSelect.splice(i, 0, true)
					} else
						this.isSelect[i] = false
				}
				console.log(this.isSelect[e])
			},

			// 选择地点
			select_res: function(e) {
				for (let i = 0; i < this.isSelect_res.length; i++) {
					if (i == e) {
						this.isSelect_res.splice(i, 0, true)
					} else
						this.isSelect_res[i] = false
				}
			},

			// 选择主食
			select_zhushi: function(e) {
				for (let i = 0; i < this.isSelect_zhushi.length; i++) {
					if (i == e) {
						this.isSelect_zhushi.splice(i, 0, true)
					} else
						this.isSelect_zhushi[i] = false
				}
			},
			
			// 筛选
			filter: function(e) {
				let _this = this
				const db = uniCloud.database();
				db.collection("Tweets").get().then(res=> {
					console.log(res)
					let i = Math.floor(Math.random()*res.result.data.length);
					_this.item = res.result.data[i]
				}),
				this.flag = true;
			},
			
			toDetail() {
				let _this = this
				//跳转到详情页
				uni.navigateTo({
					url: "/pages/detail_page/index",
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: _this.item
						})
					}
				})
			}
		},
		onHide() {
			this.flag = false
		}
	}
</script>

<style lang="scss">
	
	.active{
		background-color: #F1D1D1;
	}
	
	.list {
		
		.li:nth-child(1) {
			.rank_grade {
				background-color: #FFB400;
			}
			background-color: #F1D1D1;
		}


		.li {
			height: 200rpx;
			margin-top: 10rpx;
			position: relative;
			margin-left: 10%;
			margin-right: 10%;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 2px 2px 20rpx #ccc;
			padding: 10rpx;
			border: 1px solid #ccc;

			.img {
				width: 40%;
				overflow: hidden;
				height: 145rpx;
				image {
					margin-top: 10rpx;
					margin-left: 10rpx;
					width: 100%;
					filter: brightness(0.8);
				}
			}

			.detail {
				position: absolute;
				left: 40%;
				top: 10rpx;

				.name {
					margin-top: 10rpx;
					margin-left: 20rpx;
				}

				.adress {
					margin-top: 10rpx;
					margin-left: 20rpx;
				}

				.grade {
					margin-top: 10rpx;
					margin-left: 20rpx;
				}
			}

			.reason {
				margin-left: 10rpx;
				font-weight: bold;
			}
		}
	}
</style>

